<template>
		<block v-if="loading">
			<view  class="skeleton"  :class="{ animate: animate }" >
				<!-- <view class="skeleton-list">
					<view class="skeleton-title md " style="width: 20%;" v-for="item in 3"></view>
				</view> -->
				<view class="order" v-for="(item,index) in 6" :key="index">
					<view class="skeleton-list">
						<view class="skeleton-title" style="width: 30%;"></view>
					</view>
					<view class="skeleton-list">
						<view class="skeleton-title" style="width: 10%;"></view>
					</view>
					<view class="skeleton-list">
						<view class="" style="width: 60%;"></view>
						<view class="btn md"></view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view >
				<slot></slot>
			</view>
		</block>
</template>
<script>
export default {
	props: {
		loading: {
			type: Boolean,
			default: true
		},
		titleWidth: {
			type: String,
			default: '30%'
		},
		animate: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {};
	},
};
</script>

<style scoped lang="less">
.skeleton {
	--bg-color: #e7e7e8;
	--row-height: 15px;
	--row-margin-top: 12px;
	--title-border-radius: 2px;
	--text-height: 10px;
	padding: 20rpx 40rpx;
	margin-top: var(--status-bar-height);
	.skeleton-list{
		display: flex;
		justify-content: space-between;
	}
	.status{
		background-color: #3C8EFF !important;
	}
	.btn{
		width: 216rpx;
		background-color: #3C8EFF;
		border-radius: 10rpx;
	}
	.skeleton-title {
		background-color: var(--bg-color);
		height: var(--row-height);
		border-radius: var(--title-border-radius);
		margin-bottom: var(--row-margin-top);
	}
	.md {
		height: 50rpx;
	}
	.skeleton-title + .skeleton-rows {
		margin-top: var(--row-margin-top);
	}
	
}
.skeleton.animate {
		animation: skeleton-blink 1.2s ease-in-out infinite;
	}
	@keyframes skeleton-blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}
</style>
